<template>
  <div class="about">
    <div class="content_wrap" v-loading.fullscreen.lock="fullscreenLoading">
      <div class=" search clearFix">
        <!-- eslint-disable-next-line -->
        <input type="text" placeholder="请输入您要搜索的事项关键词" v-model="searchTxt" class="searchText" ref="search_input"
          @input="searchFn" id="searchText" maxlength="50" name="qt">
        <van-icon class="search_icon" name="search" />
        <van-icon v-if="searchTxt.trim() != ''" @click="clearSearch" class="clear_search" name="clear" />
      </div>
      <div class="type_line o_h">
        <!-- <div :class="activeBigType[0] !== -1 ? 'type_left0 fl' : 'type_left1 fl'">{{ searchTxt != '' ? '搜索结果' : name }}
          <van-icon name="arrow-down" />
        </div> -->
        <ul class="nine_wrap">
          <li v-for="(it1, in1) in bigTypeArr" @click="intoList(it1)"
            :class="it1.name === activeBigType.name ? 'ent_item active_item' : 'ent_item'"
            :key="'big_type_layer1' + in1">{{
              getTypeName(it1.name) }}
          </li>
        </ul>
        <!--        <div :class="activeBigType[0]!==-1?'type_left0 fl':'type_left1 fl'" @click="showTypeArea=true">{{activeBigType[0]!==-1?bigTypeArr[activeBigType[0]][activeBigType[1]]:'全部事项'}} <van-icon name="arrow-down" /></div>-->
        <!--        <div :class="activeBigType[0]!==-1?'type_right0 fr':'type_right1 fr'" @click="showOtherType=true">{{activeBigType[0]===-1?otherType[otherActiveIndex]:'根据事项分类选择'}}</div>-->
      </div>
      <ul class="bus_list_wrap">
        <li class="list_item tl" v-for="(item, index) in businessArr" @click="intoDeatil(item.id)"
          :key="'bus_item' + id + index">{{ item.matterName }}
        </li>
      </ul>
      <div class="all_num" v-if="totalNum > 0">共{{ totalNum }}个事项</div>
      <el-empty v-if="!failed && !fullscreenLoading && businessArr.length === 0"
        :description="searchTxt.trim() === '' ? '暂无数据' : '未搜索到相关事项'"></el-empty>
      <el-empty v-if="failed" :description="errorMsg"></el-empty>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { useRoute, useRouter } from "vue-router"

export default {
  name: 'HomeView',
  data() {
    return {
      failed: false,
      errorMsg: "",
      fullscreenLoading: true,
      bigTypeArr: [],
      activeBigType: { name: '所有事项', id: '' },
      businessArr: [],
      //otherType: [],
      pageNum: [],
      totalNum: 0,
      pageSize: 1000,
      currentPageNum: 1,
      otherTypeOpened: true,
      otherActiveIndex: -1,
      searchTxt: "",
      searchResult: false,
      showTypeArea: false,
      showOtherType: false,
      currentType: {}
    }
  },
  created() {
    console.log("#####", this.type)
    this.getMatterArray(0)
  },
  setup() {
    //router是全局路由对象，route= userRoute()是当前路由对象
    let router = useRouter();
    const intoDeatil = (id) => {
      router.push({
        path: 'businessDetails',
        query: {
          oid: id
        }
      })
    }
    let route = useRoute();
    const type = route.query.type
    const title = route.query.title;
    const name = route.query.name;
    return {
      type, title, name, intoDeatil
    }
  },
  mounted() {
    if (this.type == 0) {
      this.$refs.search_input.focus()
    }
  },
  methods: {
    getTypeName(name) {
      if (typeof name == "string" && name !== "") {
        return name.replace('彭州市', '')
      }
    },
    intoList(active) {
      this.activeBigType = active
      this.businessArr = []
      this.fullscreenLoading = true
      this.getMatterArray()
    },
    getMatterArray() {
      let param = {
        params: { pageSize: this.pageSize, pageNo: 0, managerid: this.activeBigType.id, name: this.searchTxt }
      }
      axios.get("https://www.pengzhou.org.cn/api/pzbszn/matterList", param).then((data) => {
        if (data.data.code === 200) {
          this.fullscreenLoading = false
          this.failed = false
          this.businessArr = data.data.matter.datas
          this.currentPageNum = data.data.matter.crurentNum
          this.totalNum = data.data.matter.totalNum
          this.pageSize = data.data.matter.pageSize
          if (this.activeBigType.id === "") {
            this.bigTypeArr = [{ name: '所有事项', id: '' }, ...data.data.manager]
          }
        } else {
          this.errorMsg = "获取事项列表失败，请稍后重试！"
          this.failed = true
          this.fullscreenLoading = false
        }
      }).catch((error) => {
        this.errorMsg = "获取事项列表失败，请稍后重试！"
        this.failed = true
        this.fullscreenLoading = false
        console.log("get data has error", error)
      })
    },
    // getTypeMatter(title, name, page) {
    //   let param = page === 0 ? { params: { type: title, typeName: name } } : {
    //     params: {
    //       type: title,
    //       typeName: name,
    //       pageSize: this.pageSize,
    //       pageNo: page
    //     }
    //   }
    //   axios.get("/api/ybj/findMatterValueByType", param).then((data) => {
    //     console.log("findMatterValueByType", data.data)
    //     if (data.data.code == 200) {
    //       this.fullscreenLoading = false
    //       this.failed = false
    //       if (data.data.matter.datas.length > 0) {
    //         this.businessArr = data.data.matter.datas
    //         this.currentPageNum = data.data.matter.crurentNum
    //         this.totalNum = data.data.matter.totalNum
    //         this.pageSize = data.data.matter.pageSize
    //         if (page !== 0) return
    //         for (let i = 0; i < data.data.matter.totalPageSize; i++) {
    //           this.pageNum.push({ num: i + 1 })
    //         }
    //       } else {
    //         this.businessArr = []
    //         this.errorMsg = "此分类还没有事项！"
    //         this.failed = true
    //       }
    //     } else {
    //       this.errorMsg = "获取事项列表失败，请稍后重试！"
    //       this.failed = true
    //       this.fullscreenLoading = false
    //     }
    //   }).catch((error) => {
    //     this.errorMsg = "获取事项列表失败，请稍后重试！"
    //     this.failed = true
    //     this.fullscreenLoading = false
    //     console.log("get data has error", error)
    //   })
    // },
    // getSearchMatter(page) {
    //   let param = page === 0 ? { params: { matterName: this.searchTxt.trim() } } : {
    //     params: {
    //       matterName: this.searchTxt.trim(),
    //       pageSize: this.pageSize,
    //       pageNo: page
    //     }
    //   }
    //   axios.get("/api/ybj/findMatterValue", param).then((data) => {
    //     console.log("findMatterValue for search", data.data)
    //     if (data.data.code == 200) {
    //       this.fullscreenLoading = false
    //       this.failed = false
    //       if (data.data.matter.datas.length > 0) {
    //         this.businessArr = data.data.matter.datas
    //         this.currentPageNum = data.data.matter.crurentNum
    //         this.totalNum = data.data.matter.totalNum
    //         this.pageSize = data.data.matter.pageSize
    //         if (page !== 0) return
    //         for (let i = 0; i < data.data.matter.totalPageSize; i++) {
    //           this.pageNum.push({ num: i + 1 })
    //         }
    //       } else {
    //         this.businessArr = []
    //         this.errorMsg = "没有找到‘" + this.searchTxt.trim() + "’相关的事项！"
    //         this.failed = true
    //       }
    //     } else {
    //       this.errorMsg = "查询‘" + this.searchTxt + "’相关事项失败，请稍后重试！"
    //       this.failed = true
    //       this.fullscreenLoading = false
    //     }
    //   }).catch((error) => {
    //     this.errorMsg = "查询‘" + this.searchTxt + "’相关事项失败，请稍后重试！"
    //     this.failed = true
    //     this.fullscreenLoading = false
    //     console.log("get data has error", error)
    //   })
    // },
    searchFn(e) {
      if (e.isComposing) return
      const st = this.searchTxt.trim()
      if (st != "") {
        this.activeBigType = { name: st, id: '' }
        this.businessArr = []
        this.fullscreenLoading = true
        this.getMatterArray()
      } else {
        this.clearSearch()
      }
    },
    clearSearch() {
      this.searchTxt = ''
      this.activeBigType = { name: '所有事项', id: '' }
      this.businessArr = []
      this.fullscreenLoading = true
      this.getMatterArray()
    },
  }
}
</script>

<style scoped>
.content_wrap {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  clear: both;
  overflow: hidden;
}

.head_img {
  width: 100%;
  height: 100px;
  background-size: cover;
}

.search {
  position: relative;
  width: 100%;
  margin: 10px auto 0;
  background: rgba(255, 255, 255, .5);
  /*filter: progid: DXImageTransform.Microsoft.gradient(startcolorstr=#7fffffff, endcolorstr=#7fffffff);*/
  border-radius: 10px;
  border: 1px solid #ddd;
  height: 36px;
  overflow: hidden;
}

.search form {
  display: inline-block;
}

.search input {
  float: left;
  height: 36px;
  line-height: 40px;
  padding: 0 5px;
  border: none;
  outline: none;
}

.search .searchText {
  color: #333333;
  width: 80%;
  font-size: 14px;
  margin: 0 25px;
  overflow: hidden;
}

.search .searchBtn {
  position: absolute;
  right: 0;
  background: #5482eb url(../assets/2022_search.png) no-repeat 21% center;
  cursor: pointer;
  border-radius: 5px;
  width: 128px;
  color: #fff;
  font-size: 18px;
  text-indent: 20px;
}

.search .searchText::placeholder {
  color: #c0c0c0;
}

.other_type_head {
  padding: 10px;
  box-sizing: border-box;
  margin: 18px 0 10px;
  width: 100%;
  height: 40px;
  border-top: solid 1px #dddddd;
  font-size: 14px;
  color: #8b8b8b;
  transition: all 0.5s;
}

.other_type_head:hover {
  border-top: solid 1px #5482eb;
  background: #fbfbfb;
  color: #5482eb;
}

.list_item {
  line-height: 28px;
  border-bottom: solid 1px #f0f0f0;
  padding: 6px 0 6px 10px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.5s;
  background: url("../assets/2022_dian.png") 0 18px no-repeat;
}

.svg_icon {
  width: 1em;
  height: 1em;
  fill: #5482eb;
  transition: all 0.5s;
}

.opened_icon .svg_icon {
  transform: rotate(180deg);
}

.close_icon .svg_icon {
  transform: rotate(0deg);
}

.page_num {
  width: 100%;
  text-align: right;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
}

.page_num_item {
  display: inline-block;
  padding: 5px 10px 4px;
  margin: 0 10px;
  border: solid 1px #5482eb;
  color: #5482eb;
  cursor: pointer;
  background: #fff;
  border-radius: 4px;
  font-size: 16px;
  transition: all 0.5s;
}

.page_num_item:hover,
.cur_page {
  background: #5482eb;
  color: #fff;
}

.all_num {
  float: left;
  text-align: right;
  font-size: 12px;
  color: #b6b6b6;
  padding: 8px 0;
}

.other_txt {
  font-size: 16px;
  color: #333;
}

.other_type_head:hover .other_txt {
  color: #5482eb;
}

.type_left0 {
  color: #5482eb;
  font-size: 16px;
}

.type_left1 {
  color: #bbb;
  font-size: 16px;
}

.type_right0 {
  color: #bbb;
  line-height: 28px;
  font-size: 14px;
}

.type_right1 {
  color: #5482eb;
  line-height: 28px;
  font-size: 14px;
}

.type_line {
  padding-bottom: 10px;
  border-bottom: solid 1px #f0f0f0;
}

.type_area {
  border-bottom: 1px solid #edebeb;
  padding: 5px 18px;
  margin: 8px 0;
  text-align: left;
}

.type_item {
  font-size: 16px;
  line-height: 48px;
  color: #333;
  cursor: pointer;
}

.active_item {
  color: #5482eb;
  padding-left: 10px;
  background: url("../assets/2022_dian.png") center left no-repeat;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.overlay_con {
  width: 90%;
  height: auto;
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
}

.other_type_item {
  display: inline-block;
  margin: 5px 10px;
  padding: 6px 10px;
  color: #333;
  border: solid #dddddd 1px;
  border-radius: 5px;
  background: #fbfbfb;
  cursor: pointer;
  transition: all 0.5s;
}

.other_active {
  background: #5482eb;
  border: solid #5482eb 1px;
  color: #fff;
}

.search_icon {
  position: absolute;
  left: 8px;
  top: 10px;
  font-size: 20px;
  color: #bbb;
}

.clear_search {
  position: absolute;
  right: 8px;
  top: 10px;
  font-size: 20px;
  color: #bbb;
}

.nine_wrap {
  width: 100%;
  box-sizing: border-box;
  margin: 15px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ent_item {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 5px;
  border-radius: 6px;
  border: 1px solid #dfdfdf;
  color: #5482eb;
  font-size: 12px;
}

.active_item {
  border: 1px solid #5482eb;
  background: #5482eb;
  color: #fff;
}

/deep/ input:-internal-autofill-selected {
  background: #fff;
}
</style>